<!DOCTYPE html>
<html lang="en">

<head>  
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="/admin/lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/admin/css/base.css">
</head>

<body>
    <div class="login-body">
        <div class="login-container">
            <h4 class="title">黑马程序员 - 博客管理员登录</h4>
            <div class="login">
                <form action="login" method="POST" id="loginForm">
                    <div class="form-group">
                        <label>邮件</label>
                        <input type="email" class="form-control" placeholder="请输入邮箱地址" name="email">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input type="password" class="form-control" placeholder="请输入密码" name="password">
                    </div>
                    <button type="submit" class="btn btn-primary">登录</button>
                </form>
            </div>
            <div class="tips"></div>
        </div>
    </div>
    <script src="/admin/lib/jquery/dist/jquery.min.js"></script>
    <script src="/admin/lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="/admin/js/common.js"></script>
    <script>

        // 为表单添加提交事件,客户端检测是否输入密码
        $('#loginForm').on('submit', function () {
            // 获取用户提交数据
            var result = serializeToJson($(this));
            console.log(result)
            //    如果用户没有输入
            if (result.email.trim().length == 0) {
                alert('请输入邮箱地址');
                return false;
            }
            if (result.password.trim().length == 0) {
                alert('请输入密码');
                //阻止程序向下执行
                //阻止表单默认提交行为 
                return false;
            } 
        })
    </script>
</body>

</html>